import React, { useState, useEffect, useMemo, useRef,useCallback } from 'react';
import { isEqual } from 'lodash';

import './test.css'
import a from './statics/carsouel_img/39.jpg'
import b from './statics/carsouel_img/ani.jpg'
import c from './statics/carsouel_img/mama.png'
import d from './statics/carsouel_img/miku.jpg'
import e from './statics/carsouel_img/MIKU2.png'



function App(props){
  const [count, setCount] = useState(0);



  const doubleCount = useMemo(() => {
    return 2 * count;
  }, [count]);

  const couterRef = useRef();
  const timerref = useRef()

  useEffect(()=>{
    timerref.current = setInterval(() => {
        setCount(count => count+1)
    }, 100);
  },[])

  const add = useCallback(()=>{
    setCount(count => count + 1)
  },[])


 

  useEffect(() => {
      if(count>=10) {
          clearInterval(timerref.current)
      }
  }, [count]);
  
  return (
    <>
      <button ref={couterRef} onClick={add}>Count: {count}, double: {doubleCount}</button>
  
    </>
  );
}





const useDeepCompareEffect = (fn,deps) =>{
    const compare = useRef(0)
    const predeps = useRef(deps) //先前的依赖
    if(!isEqual(predeps.current,deps)){ //比较两者
        compare.current ++
    }
    predeps.current = deps //将新的依赖存起来
    return useEffect(fn,[compare.current]) 
}



const useInterval = (callback,interval) =>{
  useEffect(()=>{
    const start = new Date().getTime()
    const I = setInterval(()=>{
      callback(new Date().getTime() - start ) //diff
    },interval)
    return ()=>{
      clearInterval(I)
    }
  },[])
}

const useSlider = (N ,speed = 3000) =>{
  const [slider,setslider] = useState(0)
  useInterval((diff)=>{ //diff为所经过时间
    setslider(Math.floor(diff / speed) % N)
  },300)
  return slider
}


const Carsouel = ()=>{
  const slider = useSlider(5) //图片数量
  console.log(slider);
  return (<div className="scroller">
    <div className="inner" style={{
      width: '500%',
      transform : `translateX(-${100 * slider/5}%)`
    }}>
    <img src = {a}></img>
    <img src = {b}></img>
    <img src = {c}></img>
    <img src = {d}></img>
    <img src = {e}></img>
    </div>
    
  </div>)
}
export default Carsouel
